<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		     <script src="../js/vue.min.js"></script>
			 <script src="../js/axios.js"></script>
	</head>
	<body>
		<!--
		Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
		Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
		使用 response.data 读取 JSON 数据
		-->

		 <div id="app">
		   <div  v-for="site in info">
		     {{ site.name }}------{{ site.nick }}
		   </div>
		 </div>
		 <script type = "text/javascript">
		 new Vue({
		   el: '#app',
		   data() {
		     return {
		       info: null
		     }
		   },
		   <!--钩子函数就是指在所有函数执行前，我先执行了的函数成功后的操作，使用then
		   -->
		   mounted(){
		    this.getData();
		   },
		   
		    methods: {
		 	   getData() {
		 	    axios.get('../jsondata/1.json').then(
				response => {this.info = response.data.first;
				alert(response.data.id+"--"+response.data.name+"--"+response.data.sex);
				}, 
				
				);
		 	  }
		    }
		   
		   
		 })
		 </script>
	
	</body>
</html>
